<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增道具表')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-courseTool-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">道具名字：</label>
            <div class="col-sm-8">
                <input name="title" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8">
                <input type="file" name="upload" id="upload" style="display: none;"/>
                <input type="hidden"  id="fileType" style="display: none;" />
                <a class="btn btn-success" onclick="onFile(1)" >
                    <i class="fa fa-plus"></i> 添加附件
                </a>

                <a class="btn btn-success" onclick="onFile(2)" >
                    <i class="fa fa-plus"></i> 上传封面
                </a>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">道具地址：</label>
            <div class="col-sm-8">
                <input name="imgUrl" id="imgUrl" class="form-control" type="text" >
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">类型：</label>
            <div class="col-sm-8">
                <input name="type" id="type" class="form-control" type="text" value="txt">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">封面地址：</label>
            <div class="col-sm-8">
                <input name="cover" id="cover" class="form-control" type="text" >
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">封面类型：</label>
            <div class="col-sm-8">
                <input name="coverType" id="coverType" class="form-control" type="hidden" value="txt">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">资源归属：</label>
            <div class="col-sm-8">
                <input name="ascription" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">月龄阶段：</label>
            <div class="col-sm-8">
                <input name="monthAge" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">教具应用目标：</label>
            <div class="col-sm-8">
                <input name="application" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">教具应用使用方式及建议：</label>
            <div class="col-sm-8">
                <input name="applicationType" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">标签：</label>
            <div class="col-sm-8">
                <input name="comment" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/courseTool"
    $("#form-courseTool-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-courseTool-add').serialize());
        }
    }

    $("input[name='created']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    function onFile(type) {
        $('#upload').click();
        $('#fileType').val(type);
    }

    $('#upload').on('change', function () {
        $.modal.loading("拼命上传中，请稍候...");
        var farmdate = new FormData();
        farmdate.append("file", $('#upload')[0].files[0]);
        $.ajax({
            type: "post",
            url: "/system/courseContent/importImg",
            data: farmdate,
            contentType: false,
            processData: false,
            success: function (date) {

                var fileType  = $('#fileType').val();
                var index = date.lastIndexOf(".");
                //获取后缀
                var ext = date.substr(index + 1);
                //获取文件类型
                var type = getFileType(ext)

                if (fileType==1){
                    $('#imgUrl').val(date);
                    $('#type').val(type);
                }
                if (fileType==2){

                    $('#cover').val(date);
                    $('#coverType').val(type);
                }
                $.modal.closeLoading();
            }
        })
    });

    //传后缀判定类型
    function getFileType(suffix) {
        var result = ''; // 获取类型结果

        if (!suffix) return false; // fileName无后缀返回false
        suffix = suffix.toLocaleLowerCase(); // 将后缀所有字母改为小写方便操作
        // 匹配图片
        const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']; // 图片格式
        result = imgList.find(item => item === suffix);
        if (result) return 'image';
        // 匹配txt
        const txtList = ['txt'];
        result = txtList.find(item => item === suffix);
        if (result) return 'txt';
        // 匹配excel
        const excelList = ['xls', 'xlsx'];
        result = excelList.find(item => item === suffix);
        if (result) return 'excel';
        // 匹配word
        const wordList = ['doc', 'docx'];
        result = wordList.find(item => item === suffix);
        if (result) return 'word';
        // 匹配pdf
        const pdfList = ['pdf'];
        result = pdfList.find(item => item === suffix);
        if (result) return 'pdf';
        // 匹配ppt
        const pptList = ['ppt', 'pptx'];
        result = pptList.find(item => item === suffix);
        if (result) return 'ppt';
        // 匹配zip
        const zipList = ['rar', 'zip', '7z'];
        result = zipList.find(item => item === suffix);
        if (result) return 'zip';
        // 匹配视频
        const videoList = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
        result = videoList.find(item => item === suffix);
        if (result) return 'video';
        // 匹配音频
        const radioList = ['mp3', 'wav', 'wmv'];
        result = radioList.find(item => item === suffix);
        if (result) return 'radio';
        // 其他文件类型
        return 'other';
    }

</script>
</body>
</html>